<!-- 编辑角色 -->
<template>
  <div>
    <a-modal 
      :title="$t('Edit-role')"
      width='30%'
      v-model='editRole_dialog'
      @cancel='cancelHandle'
      @ok='submitEditRole'
      :cancelText="$t('Cancel')"
      :okText="$t('Sure')"
      :maskClosable='false'
      v-dragModal>
      <a-form :form='form'>
        <a-form-item :label="$t('Role-name')" v-bind='formlayout' has-feedback>
          <a-input v-decorator="['name',{
            rules:[
              {required:true,message:$t('Enter')+$t('Role-name')},
              {pattern:/^([\u4e00-\u9fa5]|[a-zA-Z])[a-zA-Z\u4e00-\u9fa5\d_:-]{2,30}$/,message:$t('Not_enter_special_characters7')}
            ],
              initialValue:targetRole ? targetRole.name : ''
          }]" :placeholder="$t('Enter')+$t('Role-name')">
          </a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import request from '@/request/request'

export default {
  name: "EditCustomRole",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetRole: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form:this.$form.createForm(this),
      editRole_dialog: false,
      formlayout:{
        labelCol:{span:6},
        wrapperCol:{span:17}
      },
    }
  },

  mounted() {
    this.editRole_dialog = this.visible;
  },

  methods: {
    //提交编辑角色
    submitEditRole(e) {
      e.preventDefault();
      this.form.validateFields((err,value)=>{
        if(!err) {
          request('post', 'usermanager/role/update',{
            name: value.name,
            id: this.targetRole.id
          }).then(res => {
            this.cancelHandle();
            this.$emit('updateCustomList');
            this.model(res.data.id) //返回模板
            this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
          })
        }
      })
    },

    //关闭编辑弹窗
    cancelHandle() {
      this.$emit('closeRoleDialog', 'edit');
    },
  },
}
</script>